<!--
 * @Author: panda-hbd 10254515+panda-hbd@user.noreply.gitee.com
 * @Date: 2022-11-13 10:59:08
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-20 13:33:20
 * @FilePath: \text-online-system\src\components\StudentInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="LeftSide">
        <div class="photo">
            <img :src=baseurl+users.avatar alt="">
        </div>
        <p>{{users.name}}</p>
        <div>
            <ul class="nav" v-if="this.$store.state.userType =='student'">
               <li @click="toCourseInfo" :class="activeLi=='course'?'activeLi':''"><el-icon><Collection /></el-icon>我的课程</li>
               <li @click="toPersonalCenter" :class="activeLi=='person'?'activeLi':''"><el-icon><User /></el-icon>个人中心</li>
               <!-- <li @click="toCourseInfo" :class="activeLi=='course'?'activeLi':''"><el-icon><Collection /></el-icon>我的课程</li> -->
            </ul>
            <ul class="nav" v-if="this.$store.state.userType=='teacher'">
               <li @click="toPersonalCenter" :class="activeLi=='person'?'activeLi':''"><el-icon><User /></el-icon>个人中心</li>
               <li @click="toCourseInfoOfTeacher" :class="activeLi=='course'?'activeLi':''"><el-icon><Collection /></el-icon>我教的课</li>
               <li @click="toFiles" :class="activeLi=='files'?'activeLi':''"><el-icon><Collection /></el-icon>试卷库</li>
            </ul>
        </div>
        <el-button type="primary" plain @click="logout">退出登录</el-button>
        <!-- <el-button type="primary plain">退出登录</el-button> -->
    </div>
</template>

<script>
import user from '../api/user'
import { mapState } from 'vuex';
export default {
    name: 'InfoView',

    data() {
        return {
            baseurl : this.$http.defaults.baseURL,
            activeLi:'course',
            
          
        };
    },
    mounted() {
        var id = localStorage.getItem("token");
        this.$store.dispatch('queryById', id);
        console.log(this.users)
       
    },

    methods: {
        toPersonalCenter(){
            this.$router.push('/index/personalCenter')
            this.activeLi='person'
        },
        toCourseInfo(){
            this.$router.push('/index/courseInfo')
            this.activeLi='course'
        },
        toFiles(){
            this.$router.push('/index/files')
            this.activeLi='files'
        },
        toCourseInfoOfTeacher(){
            this.$router.push('/index/course')
            this.activeLi='course'
        },

        logout(){
             localStorage.clear()
             sessionStorage.clear()
             this.$router.replace("/login")
        }
       
    },
    computed:{
        ...mapState(['users']),
        

       
    }
};
</script>

<style scoped>
.LeftSide{
    text-align: center;
    color: var(--balckColor);
}
.photo{
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
    margin: 0 auto;
}
.photo img{
    width: 100%;
    height: 100%;
}
p{
    margin: 1rem auto;
}

.nav li{
    padding: 0.5rem;
}
.activeLi{
    background-color:var(--blueColor5);
}

.el-button{
    margin: 0.8rem;
    /* color: var(--balckColor);
    background-color: var(--blueColor5); */
}
.el-icon{
    margin-right: 0.3rem;
}
</style>